<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="styles/index.css" />
    <link rel="stylesheet" type="text/css" href="styles/common.css" />
    <script type="text/javascript" src="js/common.js"></script>
    <!-- 引入vue 和 axios -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="wrap" id="app">
        <div class="container">
            <!-- 头部 start -->
            <header class="header">
                <div class="address">
                    <i class="iconfont icon-dizhi"></i>
                    <p>东方广场</p>
                </div>
                <input type="text" placeholder="满99减98">
                <div class="search-words">
                    <a href="#" class="search-word-item">牛奶</a>
                    <a href="#" class="search-word-item">黄瓜</a>
                    <a href="#" class="search-word-item">方便面</a>
                    <a href="#" class="search-word-item">面包</a>
                    <a href="#" class="search-word-item">鸡蛋</a>
                    <a href="#" class="search-word-item">矿泉水</a>
                    <a href="#" class="search-word-item">酸奶</a>
                </div>
            </header>
            <!-- 头部 end -->
            <!-- 分类导航 start -->
            <nav class="menu_category">
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll01.png" alt="">
                            <p>超市</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll02.png" alt="">
                            <p>生鲜果蔬</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll03.png" alt="">
                            <p>蛋糕甜品</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll04.png" alt="">
                            <p>鲜花</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll05.png" alt="">
                            <p>送药上门</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll10.png" alt="">
                            <p>手机家电</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll06.png" alt="">
                            <p>个洗家清</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll07.png" alt="">
                            <p>VIP 特价</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll09.png" alt="">
                            <p>储值特惠</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/scroll/scroll08.png" alt="">
                            <p>帮助中心</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- 分类导航 end -->
            <!-- banner start -->
            <img src="images/banner/02.jpg" style="width: 100%;">
            <!-- banner end -->
            <!-- 附近商家 start -->
            <div class="shop">
                <nav class="title">
                    <h2>附近商家 <a href="pages/shop-list.html">查看更多</a> </h2>
                </nav>
                <div class="shop_list">
                    <ul>
                        <!-- 商家列表通过Vue循环渲染 -->
                        <li v-for="shop in shops" :key="shop.id">
                            <a href="pages/shop.html">
                                <div class="shop_info">
                                    <img :src="shop.logo" class="shop_img">
                                    <div class="shop_main">
                                        <div class="main_top">
                                            <h3>{{ shop.name }}</h3>
                                        </div>
                                        <div class="main_more">
                                            <div class="main_desc">
                                                <img src="images/shop/star.png" alt="">
                                                <span class="sale">月销{{ shop.sales || '1000+' }}</span>
                                            </div>
                                            <div class="money_limit">
                                                <span>￥{{ shop.qisong }}起送 | 配送费￥{{ shop.psf }}</span>
                                                <span>{{ shop.location }} | {{ shop.deliveryTime || '41分钟' }}</span>
                                            </div>
                                            <!-- 循环渲染商家活动 -->
                                            <div class="main_price" v-for="(huodong, index) in shop.huodongs" :key="index">
                                                <span class="act_icon">{{ huodong.name }}</span>
                                                <span class="act_desc">{{ huodong.content }}: {{ huodong.detail || '具体活动' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 附近商家 end -->
        </div>
        <!-- 底部 start -->
        <footer class="footer">
            <ul>
                <li>
                    <a href="index.html" class="tabcur">
                        <span class="iconfont icon-shouye"></span> 首页
                    </a>
                </li>
                <li>
                    <a href="pages/shopcart.html">
                        <span class="iconfont icon-gouwuche"></span> 购物车
                    </a>
                </li>
                <li>
                    <a href="pages/order.html">
                        <span class="iconfont icon-dingdan"></span> 订单
                    </a>
                </li>
                <li>
                    <a href="pages/user.html">
                        <span class="iconfont icon-wode"></span> 我的
                    </a>
                </li>
            </ul>
        </footer>
        <!-- 底部 end -->
    </div>

    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    shops: []   // 存储商家数据
                };
            },
            mounted() {
                // 从data.json获取数据
                axios.get('data.json')
                    .then(response => {
                        this.shops = response.data.shops;
                        console.log('商家数据：', this.shops);
                    })
                    .catch(error => {
                        console.error('获取数据失败：', error);
                    });
            }
        }).mount("#app");
    </script>
</body>

</html>